<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"
    />
    {% if isComponent %}
      {% set pageTitle = title or name %}
    {% else %}
      {% set pageTitle = title %}
    {% endif %}
    <!-- Use the 11ty data system to set the title -->
    <title>Material Web{% if pageTitle %} - {{ pageTitle }}{% endif %}</title>
    <!-- Set the color of the url bar on mobile to match theme -->
    <meta name="theme-color" content="#251f16" />
    <link href="/images/favicon.svg" rel="icon" sizes="any" type="image/svg+xml">
    <!-- Inlines the global css in site/css/global.css -->
    {% inlinecss "global.css" %}
    <!-- MUST be loaded before any lit bundle. allows hydration of SSRd components -->
    <script type="module" src="/js/ssr-utils/lit-hydrate-support.js"></script>
    <!-- Loads definition for <lit-island>. See docs for @11ty/is-land for usage -->
    <script type="module" src="/js/ssr-utils/lit-island.js"></script>
    <!-- Inlines the material theming logic since we want to prevent FOUC -->
    {% inlinejs "inline/apply-saved-theme.js" %}
    <script type="module" src="/js/pages/global.js"></script>
    <noscript>
      <link rel="stylesheet" href="/css/no-js.css" />
    </noscript>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=swap"
    />
    <!-- dsd-pending hides body until the polyfill has run on browsers that do not support DSD -->
    <style>
      body[dsd-pending] {
        display: none;
      }
    </style>
    <!-- If JS is disabled just show the contents without the polyfill -->
    <noscript
      ><style>
        body[dsd-pending] {
          display: block !important;
        }
      </style>
    </noscript>
    <!-- Allows sub-templates to insert into the head -->
    {% block head %}{% endblock %}
  </head>
  <body dsd-pending>
    <!-- Inlines the declarative shadow dom polyfill for FF since it's performance sensitive -->
    {% inlinejs "ssr-utils/dsd-polyfill.js" %}
    <lit-island on:idle import="/js/hydration-entrypoints/navigation.js">
      <nav-drawer page-title="{{name}}" {% if hasToc %}has-toc{% endif %}>
        <top-app-bar slot="top-app-bar" baseURI="/">
          {% block topappbar %}{{ topappbar | safe }}{% endblock %}
        </top-app-bar>

        {% if hasToc %}
          <section slot="toc">{% block toc %}{% endblock %}</section>
        {% endif %}

        <main id="main-content" slot="app-content" tabindex="0">
          <!-- this is the content of the page -->
          <!-- unrelated change to components -->
          {% block content %}{{ content | mdMarkdown | safe }}{% endblock %}
        </main>
        <md-list
            aria-label="List of pages and components"
            role="menubar"
            class="nav">
          <!-- About section -->
          <md-item><div slot="headline">About</div></md-item>
          {% for file in collections.about|filtersort('data.order') %}
            <md-list-item
              href="{{ file.url }}"
              role="menuitem"
              {% if file.url == page.url %}selected{% endif %}
              type="link"
              tabindex="{% if file.url == page.url %}0{% else %}-1{% endif %}"
            >{{ file.data.name }}</md-list-item>
          {% endfor %}
          <md-divider role="separator"></md-divider>
          <!-- Theming section -->
          <md-item><div slot="headline">Theming</div></md-item>
          {% for file in collections.theming|filtersort('data.order') %}
            <md-list-item
              href="{{ file.url }}"
              type="menuitem"
              {% if file.url == page.url %}selected{% endif %}
              type="link"
              tabindex="{% if file.url == page.url %}0{% else %}-1{% endif %}"
            >{{ file.data.name }}</md-list-item>
          {% endfor %}
          <md-divider role="separator"></md-divider>
          <!-- Components section -->
          <md-item><div slot="headline">Components</div></md-item>
          {% for file in collections.component|filtersort('data.name') %}
            <md-list-item
              href="{{ file.url }}"
              role="menuitem"
              {% if file.url == page.url %}selected{% endif %}
              type="link"
              tabindex="{% if file.url == page.url %}0{% else %}-1{% endif %}"
            >{{ file.data.name }}</md-list-item>
          {% endfor %}
        </md-list>
      </nav-drawer>
    </lit-island>
  </body>
</html>
